<template>
    <div>
    <el-table :data="data" style="width: 100%">
      <el-table-column v-for="(col,index) in cols" :key="index" :prop="col.name" :label="col.label" :type="col.type" >
        <template v-slot="{row,index}" v-if="col.slot">
            <slot :row="row" :index="index" :name="col.slot"></slot>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
    v-show="pageNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
</template>

<script>
    export default {
        props:{
            cols:{
                required:true,
                type:Array,
                default:()=>[]
            },
            data:{
                required:true,
                type:Array,
                default:()=>[]
            },
            pageNum:Number,
            pageSize:Number,
            total:Number
        },
        methods:{
            handleSizeChange(val){
                this.$emit('handleSizeChange',val)
            },
            handleCurrentChange(val){
                this.$emit('handleCurrentChange',val)
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>